<template>
  <div class="item-snapshot">
    <!-- diy render cpt -->
    <!-- <diy-cpt ref="diy-top" :stylex="true"></diy-cpt> -->

    <div v-show="isReady">
      <!-- banenr -->
      <div class="top-banner">
        <!-- TODO 小程序端用swiper -->
        <wx-swiper
          :style="{height:imgadvWxH}"
          class="wx-swiper"
          indicator-color="#fff"
          indicator-active-color="#F30C23"
          :indicator-dots="showIndicator"
        >
          <wx-swiper-item
            class="wx-swiper-item"
            v-for="(image,index) in resDetail.img_path"
            :key="index"
          >
            <img :src="image" @load="onImageLoad($event)" />
          </wx-swiper-item>
        </wx-swiper>
      </div>

      <!-- title -->
      <div class="sec-title">
        <div class="price">
          <div class="active-tag" v-if="resDetail.full_num_text">
            <span>{{resDetail.full_num_text}}</span>
          </div>
          <div class="ps">
            <span class="span1">{{mSymbol.name}}</span>
            <b>{{pricePrefix}}</b>
            <span class="span2">{{priceSuffix}}</span>
            <span class="span3">&nbsp;{{mSymbol.name}}{{resDetail.original_price}}&nbsp;</span>
          </div>
        </div>
        <p class="name">{{resDetail.title}}</p>
        <p class="yunfei">{{resDetail.post_fee}}</p>
        <!-- <div class="guarantee">
            <img :src="resDetail.store_logo" alt="">
            <span>有赞担保&nbsp;</span>
            <span>全程担保放心购买</span>
        </div>-->
      </div>

      <!-- store -->
      <!-- <div class="sec-store" @click="onViewStoreClick">
          <div>
            <img :src="resDetail.store_logo" alt="">
            <p>
              <span>{{resDetail.store_title}}</span>
              <span class="right-arrow"></span>
            </p>
          </div>
          <hr/>
          <div>
            <div>
              <img src="../../../assets/images/snapshot/icon_right.png" alt="">
              <span>企业认证</span>
            </div>
          </div>
      </div>-->

      <!-- des -->
      <div class="sec-des">
        <div class="des-title">
          <hr />
          <span>商品详情</span>
          <hr />
        </div>
        <!-- diy -->
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text
          @load="onLoad"
        >
          <diy-tpl :tplData="tplData"></diy-tpl>
        </van-list>
        <!-- <div v-show="resDetail.topHtml" v-html="resDetail.topHtml" class="des-diy mdetail_goodsdet content_detail">
          </div>
          <div v-show="resDetail.diyHtml" v-html="resDetail.diyHtml" class="des-diy mdetail_goodsdet content_detail">
          </div>
        <div v-show="resDetail.bottomHtml" v-html="resDetail.bottomHtml" class="des-diy mdetail_goodsdet content_detail">-->
      </div>
    </div>

    <!-- bottom -->
    <div class="sec-bottom">
      <div class="bottom-wrap">
        <button @click="onViewDetailClick">查看最新商品详情</button>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @description 交易商品快照
 * @author gaogm
 */

import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
import {
  reqPostSnapshot,
  transactionSnapshotDiyHtml,
} from "@/api/order/order.js";
import { mapGetters } from "vuex";
import diyTpl from "@/components/diyTpl/index";
import { openPage} from '@/utils/utils'
export default Vue.extend({
  components: {
    diyTpl,
  },
  data() {
    return {
      showIndicator: true,
      imgadvWxH: 0,
      orderItemId: "",
      resDetail: {},
      isReady: false,
      tplData: [],
      loading: false,
      finished: false,
      error: false,
      p: 2,
    };
  },
  computed: {
    pricePrefix() {
      return this.resDetail.price ? this.resDetail.price.split(".")[0] : "";
    },
    priceSuffix() {
      return this.resDetail.price
        ? "." + this.resDetail.price.split(".")[1]
        : "";
    },
    // 获取自定义符号
    ...mapGetters(["mSymbol"]),
  },
  created() {
    this.orderItemId = this.$route.query.order_item_id;

    this.$loadingWrap.show();
    setTimeout(() => {
      this.$loadingWrap.close();
    }, 10000);

    if (!this.orderItemId) {
      return;
    }
    reqPostSnapshot({
      order_item_id: this.orderItemId,
    })
      .then((res) => {
        const data = res.data;
        this.resDetail = data;
        this.isReady = true;
        this.$loadingWrap.close();
      })
      .catch((_) => {
        this.$loadingWrap.close();
      });
    // 装修数据
    transactionSnapshotDiyHtml({
      order_item_id: this.orderItemId,
    })
      .then((res) => {
        this.tplData = res.data._diyHtml;
        this.firstLoading = false;
        if (this.tplData.length < 10) {
          this.finished = true;
        }
      })
      .catch((_) => {
        this.$loadingWrap.close();
      });
  },
  mounted() {
      // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  },
  methods: {
    // 小程序swiper获取图片高度
    onImageLoad(event) {
      const imgHeight = event.detail.height;
      if (imgHeight > parseFloat(this.imgadvWxH)) {
        this.imgadvWxH = imgHeight + "px";
      }
    },
    // 装修数据
    onLoad() {
      if (this.firstLoading) {
        this.loading = false;
        return;
      }
      // 装修数据
      transactionSnapshotDiyHtml({
        order_item_id: this.orderItemId,
        p: this.p,
      })
        .then((res) => {
          this.loading = false;
          const data = res.data;
          this.tplData = this.tplData.concat(data._diyHtml);
          this.p++;
          if (data._diyHtml.length < 10) {
            this.finished = true;
          }
        })
        .catch((_) => {
          this.$loadingWrap.close();
        });
    },
    onViewStoreClick(e) {
      this.resDetail.store_link &&
        (window.location.href = this.resDetail.store_link);
    },
    onViewDetailClick(e) {
        this.resDetail.detail_link ? openPage(this.resDetail.detail_link) : "";
    },
  },
});
</script>

<style lang="scss">
@import "src/styles/variables.scss";
.miniprogram-root {
  .public-bottom {
    padding-bottom: 100px!important;
  }
}
.item-snapshot {
  padding-bottom: 100px!important;
  .top-banner {
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 向右箭头
  .right-arrow {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
  }
  .right-arrow::after {
    display: inline-block;
    content: " ";
    height: 20px;
    width: 20px;
    border-width: 3px 3px 0 0;
    border-color: #999;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  }

  .sec-title {
    background-color: white;
    padding: 30px;
    .price {
      .active-tag {
        display: inline-block;
        background: #f30c23;
        transform: skewX(-20deg);
        // vertical-align: 100%;
        span:first-of-type {
          display: inline-block;
          padding: 7px 12px;
          color: white;
          font-size: 24px;
          transform: skewX(20deg);
        }
      }
      .ps {
        display: inline-block;
        vertical-align: bottom;
        margin-left: 10px;
        .span1, .span2 {
          font-size: 26px;
          color: #f30c23;
          font-weight: bold;
        }
        b {
          font-size: 40px;
          color: #f30c23;
          font-weight: bold;
        }
        .span3 {
          margin-left: 10px;
          font-size: 26px;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
    .name {
      padding: 20px 0;
      line-height: 1.5;
      font-size: 28px;
      color: #333;
      font-weight: bold;
    }
    .yunfei {
      padding: 10px 0 30px;
      font-size: 24px;
      color: #999;
    }
    .guarantee {
      font-size: 24px;
      color: #666;
      vertical-align: middle;
      & > img {
        width: 28px;
        height: 32px;
      }
      span:nth-of-type(1) {
        font-size: 26px;
        color: #0bc05f;
      }
    }
  }

  .sec-store {
    background-color: white;
    padding: 30px 0;
    margin-top: 20px;
    hr {
      border-top-width: 1px;
      border-color: #9999991a;
    }
    & > div:nth-of-type(1) {
      display: flex;
      flex: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      img {
        width: 90px;
        height: 90px;
      }
      & > p {
        flex: 1;
        width: 0;
        display: flex;
        flex: row;
        align-items: center;
        justify-content: space-between;
        span:first-of-type {
          padding: 0 15px;
          font-size: 28px;
          color: #333;
        }
        span:last-of-type {
          font-size: 28px;
          color: #999;
        }
      }
    }
    hr {
      margin: 30px 0 30px 30px;
      border-top-width: 1px;
    }
    & > div:nth-of-type(2) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      padding: 0 30px;
      & > div {
        width: 0.25;
        margin-right: 15px;
        img {
          width: 28px;
          height: 28px;
          vertical-align: middle;
        }
        span:first-of-type {
          font-size: 24px;
          color: #666;
          vertical-align: middle;
        }
      }
    }
  }

  .sec-des {
    margin-top: 20px;
    color: #333;
    background-color: white;
    .des-title {
      padding: 30px;
      background-color: white;
      font-size: 36px;
      text-align: center;
      hr {
        width: 160px;
        display: inline-block;
        vertical-align: middle;
        border-top-width: 12px;
        border-color: #9999991a;
      }
      span {
        padding: 0 20px;
      }
    }
    .des-diy {
      max-width: 750px;
    }
  }

  .sec-bottom {
    position: fixed;
    width: 100%;
    max-width: 750px;
    height: 100px;
    bottom: 0;
    z-index: 11;
    border-top: 1px solid #f3f3f3;
    background: #fff;
    .bottom-wrap {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        width: 66%;
        padding: 20px 0;
        color: white;
        font-size: 28px;
        text-align: center;
        background: linear-gradient(
          -90deg,
          rgba(233, 1, 4, 1),
          rgba(254, 27, 73, 1)
        );
        border-radius: 38px;
        border: none;
      }
    }
  }

  .cnt-empty {
    padding-top: 40%;
  }
}
</style>
